<template>
    <div class="mainBox">
        <div class="avater">
            <el-avatar :src="user.avatar" @click="openDialog" />
            <div class="sign">
                <span style="font-size: 20px; font-weight: 1000">
                    {{ user.username }}
                </span>
                <span style="font-size: 14px;">
                    {{ user.sign }}
                </span>
            </div>
            <div class="avatarMessage">
                <div class="avatarMessageItem">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>
                        {{ user.izzeCode }}
                    </span>
                </div>
                <div class="avatarMessageItem">
                    <el-icon>
                        <Location />
                    </el-icon>
                    <span>
                        {{ user.location }}
                    </span>
                </div>
                <div class="avatarMessageItem">
                    <el-icon>
                        <Fries />
                    </el-icon>
                    <span>
                        {{ user.birthday }}
                    </span>
                </div>
                <div class="avatarMessageItem">
                    <el-icon>
                        <Phone />
                    </el-icon>
                    <span>
                        {{ user.phone }}
                    </span>
                </div>
            </div>
            <div class="fans">
                <div class="card" id="fans">
                    <img src="@/assets/icon/wodefensi.png" alt="">
                    <span>{{ user.fans > 10000 ? (user.fans / 10000).toFixed(1) + 'W' : user.fans }}</span>
                </div>
                <div class="card" id="concern">
                    <img src="@/assets/icon/wodeguanzhu.png" alt="">
                    <span>{{ user.concern }}</span>
                </div>
            </div>
        </div>
        <div class="userMessage">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <div class="form">
                        <el-form ref="formRef" :model="userUpdate" label-width="auto" style="max-width: 600px">
                            <el-form-item label="昵称：":rules="[{ required: true, message: '昵称不能为空', trigger: 'blur' }]">
                                <el-input v-model="userUpdate.username" />
                            </el-form-item>
                            <el-form-item label="性别：" :rules="[{required:true , message:'昵称不能为空',trigger:'blur'}]" >
                                <el-select v-model="userUpdate.gender" placeholder="Select" style="width: 240px">
                                    <el-option v-for="item in genders" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱：">
                                <el-input v-model="userUpdate.email" />
                            </el-form-item>
                            <el-form-item label="个性签名：">
                                <el-input type="textarea" v-model="userUpdate.sign" />
                            </el-form-item>
                            <el-form-item label="联系电话：">
                                <el-input v-model="userUpdate.phone" />
                            </el-form-item>
                            <el-form-item label="街道地址：">
                                <el-input v-model="userUpdate.location" />
                            </el-form-item>
                            <el-form-item label="就读学校：">
                                <el-input v-model="userUpdate.school" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存更改</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="账号绑定">账号绑定</el-tab-pane>
            </el-tabs>
        </div>

        <!-- 修改头像的dialog -->
        <el-dialog v-model="dialogVisible" title="上传头像" width="500">

            <input type="file" @input="getFile" accept="image/*">

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadFile">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import store from '@/store';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
let user = ref([])
let dialogVisible = ref(false)
let avatar = ref(null)
let id = localStorage.getItem('id')

const userUpdate = ref({
    id: '',
    username: '',
    gender: '',
    email: '',
    sign: '',
    phone: '',
    location: '',
    school: '',
})

const genders = ref([
    {
        value: 0,
        label: '男'
    },
    {
        value: 1,
        label: '女'
    },
    {
        value: 2,
        label: '保密'
    }
])


async function onSubmit() {
    console.log(userUpdate.value)
    const res = await axios.post('/api/user/update_user', userUpdate.value)
    if (res.data.code == 200) {
        ElMessage({
            message: res.data.message,
            type: 'success'
        })
        getUser();
    } else {
        ElMessage({
            message: res.data.message,
            type: 'error'
        })
    }
}

function openDialog() {
    dialogVisible.value = true;
}

function getFile(event) {
    avatar.value = event.target.files[0];
}



function uploadFile() {
    axios.post('/api/user/update_user_avatar', {
        'id': parseInt(id, 10),
        'file': avatar.value
    }, {
        headers: {
            'Content-Type': 'multipart/form-data',
            token: localStorage.getItem('token')
        }
    }).then(res => {
        if (res.data.code === 200) {
            dialogVisible.value = false;
            getUser()
            avatar.value = null
            ElMessage({
                message: res.data.message,
                type: 'success',
            });
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error',
            });
        }
    }).catch(err => {
        ElMessage({
            message: '请选择文件后上传',
            type: 'error',
        });
        console.log(err.data)
    })

}

function fatchData() {
    userUpdate.value.id = user.value.id
    userUpdate.value.username = user.value.username
    userUpdate.value.gender = user.value.gender
    userUpdate.value.email = user.value.email
    userUpdate.value.sign = user.value.sign
    userUpdate.value.phone = user.value.phone
    userUpdate.value.school = user.value.school
    userUpdate.value.location = user.value.location
}

function getUser() {
    axios.post("/api/login/return_id?token=" + localStorage.getItem('token'), {}, {
        headers: {
            token: localStorage.getItem('token')
        }
    })
        .then(res => {
            store.commit("setUser", res.data.data)
            user.value = store.getters.getUser
            fatchData()
            console.log(user.value);
        })
        .catch(err => {
            console.log("error:", err.data)
        })
}

onMounted(() => {
    getUser()
})
</script>

<style lang="scss" scoped>
.mainBox {
    display: flex;
    height: 500px;
    background-color: #eee;

    .avater {

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 300px;
        margin-right: 10px;
        border: 1px solid #eee;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 1px 0px #666;

        .fans {
            width: 80%;
            display: flex;
            justify-content: space-between;

            .card {
                margin-top: 30px;
                width: 80px;
                height: 40px;
                background-color: #fff;
                border-radius: 10px;
                cursor: pointer;
                display: flex;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
                border: 1px solid #eee;
                justify-content: space-between;
                align-items: center;
                padding-left: 10px;
                padding-right: 10px;
                font-weight: 1000;
                color: #444;
                transition: box-shadow 0.3s, color 0.3s;
                /* 添加过渡动画 */

                img {
                    height: 15px;
                }

                span {
                    font-size: 12px;
                }
            }

            #fans:hover {
                box-shadow: rgba(255, 48, 48, 0.426) 0px 0px 15px;
                color: rgb(255, 45, 45);
            }

            #concern:hover {
                box-shadow: rgba(233, 255, 66, 0.442) 0px 0px 15px;
                color: rgba(233, 255, 66, 0.858);
            }
        }

        .sign {
            width: 200px;
            border-bottom: 1px dashed #ddd;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span {
                color: #444;
                margin-bottom: 10px;
            }
        }

        .el-avatar {
            cursor: pointer;
            border: 1px solid #ccc;
            margin-top: 30px;
            margin-bottom: 10px;
            height: 125px;
            width: 125px;
            margin-bottom: 20px;
        }

        .el-avatar:hover {
            box-shadow: rgba(0, 0, 0, 0.37) 0px 0px 15px;
        }


        .avatarMessage {
            border-bottom: 1px dashed #ddd;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            width: 80%;
            color: #666;

            .avatarMessageItem {
                width: 100%;
                display: flex;
                font-size: 14px;
                align-items: center;

                span {
                    margin: 5px;
                }
            }
        }
    }

    .userMessage {
        width: 1000px;

        .form {
            margin-left: 30px;
            width: 40%;
        }

        .el-tabs {
            height: 100%;
        }
    }
}
</style>